/*
 * 测肤统计搜索
 * @Author: ljb
 * @Date: 2018-08-16 15:26:18
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-24 13:43:40
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	.search-form {
		padding-right: 10px;
		text-align: right;
		.type-lists {
			display: flex;
			width: 124px;
			height: 32px;
			justify-content: space-between;
			& > div {
				position: relative;
				width: 32px;
				border-radius: 50%;
				text-align: center;
				box-sizing: border-box;
				cursor: pointer;
				transition: all .3s 0s ease;
				border: 1px solid #ccc;
				&.selected {
					color: #fff;
					background-color:#5fc0f2;
					border-color: transparent;
				}
				&:hover {
					color: #fff;
					background-color: #5fc0f2;
				}
				&:active {
					&::after {
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						opacity: .5;
						transition: 0s;
					}
				}
				&::after {
					content: '';
					position: absolute;
					top: -10px;
					bottom: -10px;
					left: -10px;
					right: -10px;
					background-color: #5fc0f2;
					background-repeat: no-repeat;
					background-position: 50%;
					border-radius: 50%;
					opacity: 0;
					transition: all .3s;
				}
			}
		}
	}

</style>
<template>
	<Form
		ref="formInline"
		class="search-form"
		inline
		@keydown.native.enter.prevent="confirmSearch">
		<Form-item>
			<div class="type-lists">
				<div
					v-for="item in types"
					:key="item.value"
					:title="item.label"
					:class="[selected_item === item.value ? 'selected': '', 'overflow-ellipsis']"
					@click="confirmSearch(item.value)">{{ item.label }}</div>
			</div>
		</Form-item>
	</Form>
</template>

<script>
export default {

	data() {
		return {
			types: [
				{
					value: 'day',
					label: this.$t('home.day'),
				},
				{
					value: 'month',
					label: this.$t('home.month'),
				},
				{
					value: 'year',
					label: this.$t('home.year'),
				},
				// {
				// 	value: 'week',
				// 	label: this.$t('home.weeks'),
				// },
			],
			selected_item: 'day',
		};
	},
	methods: {
		/**
         * 确认搜索
         * @return {undefined}
         */
		confirmSearch(value) {
			if (this.selected_item === value) return;
			this.selected_item = value;
			const param = {
				group_type: value,
			};

			this.$emit('search', param);
		},
	},
};
</script>
